{% extends "base.html" %}
{% import "_my_wtf_macros.html" as my_wtf_macros %}

{% block head %}
{{ super() }}
    <link href="//cdn.bootcss.com/zTree.v3/3.5.23/css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
{% endblock %}

{% block title %}万屏时代OPC--编辑用户{% endblock %}

{% block panel_heading %}
    <style>
        #user-tag-info .label:hover,
        #display-btn:hover
        {
            cursor: pointer;
        }

        #user-tag-info .tag-wrapper {
            min-height: 120px;
            border: 1px solid #D9D9D9;
            padding: 10px;
            border-radius: 4px;
        }
        #user-tag-info .tags-block {
            margin-bottom: 30px;
        }
    </style>
    万屏时代OPC--编辑用户
     {% if user.wx_openid %}
        <a
          class="btn btn-xs btn-success pull-right" style="margin-left: 5px"
          href="{{url_for('opc_wechat_bp.wechat_sync_user', openid=user.wx_openid)}}"
        >同步微信信息</a>
     {% endif %}
     {% if not user.black %}
        <a
          class="btn btn-xs btn-danger pull-right" onclick="return confirm('请确定要拉黑此用户?')"
          href="{{url_for('op_bp.user_black', user_id=user.id)}}"
        >拉黑用户</a>
     {% else %}
         <a
          class="btn btn-xs btn-warning pull-right" onclick="return confirm('请确定要取消拉黑此用户?')"
          href="{{url_for('op_bp.user_black', user_id=user.id)}}"
        >取消拉黑</a>
    {% endif %}
    <a
      class="btn btn-xs btn-info pull-right" style="margin-right: 5px"
      href="{{url_for('op_bp.user_bid_costs', user_id=user.id)}}"
      name="user-costs"
      target="_blank"
    >消费记录</a>
    <a
      class="btn btn-xs btn-info pull-right" style="margin-right: 5px"
      href="{{url_for('op_bp.give_voucher_list', mobile=user.mobile)}}"
      target="_blank"
    >代金券赠送详情</a>
{% endblock %}

{% block panel_body %}
    <form class="form form-inline form-group-sm" id="edit-user-form" action="{{ url_for('op_bp.edit_user', user_id=user.id) }}" method="post" role="form">

        {{ form.hidden_tag() }}
        {{ tag_form.hidden_tag() }}
      <div class="well well-sm">用户信息</div>
        {{ my_wtf_macros.form_field(form.mobile, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.nickname, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.gender, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.type, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.level, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.credit, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.phone_area_id, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.war_zone_id, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.prov, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.city, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.addr, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.com, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.pos, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.wx_openid, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.active, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.is_virt, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.status, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.remark, div_col=4, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.sms_marketing_level, div_col=4, label_col=4, field_col=7) }}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        <div class="form-group col-xs-4 ">
            <div class="row">
                <label class="control-label  col-xs-4" for="free_reason_left_cnt">无理由剩余次数</label>
                <div class="col-xs-7">
                    <input class="form-control" readonly name="free_reason_left_cnt" value="{{ user_info.free_reason_feedback_cnt }}"/>
                </div>
            </div>
        </div>
        <div class="form-group col-xs-4 ">
            <div class="row">
                <label class="control-label  col-xs-4" for="reason_left_cnt">有理由剩余次数</label>
                <div class="col-xs-7">
                    <input class="form-control" readonly name="reason_left_cnt" value="{{ user.reason_left_times }}"/>
                </div>
            </div>
        </div>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.com_summary, div_col=12, label_col=1, field_col=11, style="width: 100%; height: 100px;")}}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        {{ my_wtf_macros.form_field(form.next_outbound, div_col=2, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.has_pack, div_col=2, label_col=4, field_col=7) }}
        {{ my_wtf_macros.form_field(form.publish_demand, div_col=2, label_col=4, field_col=7) }}
        <div class="form-group col-xs-2">
            <div class="checkbox">
                <label>
                    <input id="is_loyal" name="is_loyal" type="checkbox" disabled {% if user.is_loyal_user %}checked{% endif %}> 忠实客户
                </label>
            </div>
        </div>
        <div class="form-group col-xs-2">
            <div class="checkbox">
                <label>
                    <input id="is_loyal" name="is_black" type="checkbox" disabled {% if user.black %}checked{% endif %}> 是否被拉黑
                </label>
            </div>
        </div>
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        {% if user.is_engineer %}
        <!--工程商标签-->
        <div id="user-tag-info" class="panel panel-default">
            <div class="panel-heading">用户标签
                <span id="display-btn" class="glyphicon glyphicon-triangle-bottom pull-right text-primary" aria-hidden="true">
                </span>
            </div>
            <div id="tag-info-body" class="panel-body hidden">
                {% for title, name, choice in single_choices %}
                    <div class="single-choice pull-left col-md-4 tags-block">
                        <div class="tag-wrapper">
                            <p>{{ title }}</p>
                            <h4>
                                {% for key, value in choice.items() %}
                                    <div style="padding: 5px;"
                                         class="pull-left">
                                        <span class="label {% if tag_form | attr(name) and tag_form | attr(name) | attr('data') == key %}
                                        label-success{% else %}label-default{% endif %}"
                                                data-value={{ key }} data-name={{ name }}>
                                            {{ value }}
                                        </span>
                                    </div>
                                {% endfor %}
                            </h4>
                        </div>

                    </div>
                {% endfor %}

                {% for title, choice in multiple_choices %}
                    <div class="multiple-choice pull-left col-md-4 tags-block">
                        <div class="tag-wrapper">
                            <p>{{ title }}</p>
                            <h4>
                                {% for name, value in choice.items() %}
                                    <div style="padding: 5px;"
                                         class="pull-left">
                                        <span class="label {% if tag_form | attr(name) and tag_form | attr(name) | attr('data') %}
                                        label-success{% else %}label-default{% endif %}"
                                                data-name={{ name }}>
                                            {{ value }}
                                        </span>
                                    </div>
                                {% endfor %}
                            </h4>
                        </div>

                    </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!--下次回访-->
        <div id="next_outbound_info">
            <div class="well well-sm">设置回访</div>
            {{ my_wtf_macros.form_field(form.next_outbound_schedule_time, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(form.next_outbound_call_reason, div_col=4, label_col=4, field_col=7) }}
            <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        </div>

        <!--计划外呼-->
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        <div id="outbound_record_info">
            <div class="well well-sm">计划外呼</div>

            {% if outbound_record %}
            {{ my_wtf_macros.form_field(form.outbound_record_call_reason, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(form.outbound_record_remark, div_col=4, label_col=4, field_col=7) }}
            <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
            {% endif %}

            <table id="schedule-outbound-records-table" class="table table-bordered table-hover table-condensed table-striped">
            {% if schedule_outbound_records%}
               <thead>
                    <tr>
                        <th>计划外呼时间</th>
                        <th>外呼原因</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in schedule_outbound_records %}
                    <tr>
                        <td>{{ r.schedule_time_display }}</td>
                        <td>{{ r.call_reason_display }}</td>
                        <td>
                          <a
                            class="btn btn-xs btn-primary"
                            href="{{url_for('outbound_bp.cancel_outbound', record_id=r.id)}}"
                            name="cancel-outbound"
                          >取消外呼</a><br>
                      </td>
                    </tr>
                    {% endfor %}
                </tbody>
            {% else %}
            <tr><td>无</td></tr>
            {% endif %}
            </table>
        </div>

        <!--外呼记录-->
        {% if outbound_record or his_outbound_records %}
        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        <div id="outbound_record_info">
            <div class="well well-sm">外呼记录</div>

            {% if his_outbound_records %}
            <table id="his-outbound-records-table" class="table table-bordered table-hover table-condensed table-striped">
                <thead>
                    <tr>
                        <th>拨打时间</th>
                        <th>发起方式</th>
                        <th>接听客服</th>
                        <th>转化结果</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in his_outbound_records %}
                    <tr>
                        <td>{{ r.created_datetime }}</td>
                        <td>{{ r.call_type_display }}</td>
                        <td>{{ r.agent_name }}</td>
                        <td>{{ r.transform_result_display }}</td>
                        <td>{{ r.extra_info }}<td>
                    </tr>
                    {% endfor %}
                </tbody>
            {% endif %}
            </table>
        </div>
        {% endif %}

        <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

        <!--套餐信息-->
        <div id="pack_info">
            <div class="well well-sm">套餐信息
                <a class="btn btn-warning" id="give_voucher_btn" href="javascript:void(0);">赠送代金券</a>
            </div>
            <div class="form-group col-xs-12">
                <div class="panel panel-info" id="pack-prov-panel">
                    <div class="panel-heading">
                        套餐关注城市&nbsp;&nbsp;
                        <input type="checkbox" id="CheckedAllProv" />全选/全不选<br/>
                    </div>
                    <div class="panel-body">
                        <div class="hidden">
                        {{ my_wtf_macros.form_field(form.pack_prov, div_col=12, label_col=1, field_col=11) }}
                        </div>
                        <div class="zTreeDemoBackground">
                            <ul id="pack_prov_ztree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
            </div>
            {{ my_wtf_macros.form_field(form.pack_bid_point, div_col=4, label_col=4, field_col=7) }}
            <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        </div>

        <!--发布项目-->
        <div id="demand_info">
            <div class="well well-sm">项目信息</div>
            {{ my_wtf_macros.form_field(demand_form.cate, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.malf, div_col=4, label_col=4, field_col=7) }}
            <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
            {{ my_wtf_macros.form_field(demand_form.demand_type, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.surr, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.color, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.span, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.size, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.budget, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.demand_status, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.tag, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.source, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.demand_remark, div_col=4, label_col=4, field_col=7) }}
            {{ my_wtf_macros.form_field(demand_form.admin_remark, div_col=4, label_col=4, field_col=7) }}
            <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
        </div>

      <div class="form-group col-xs-12">
        <button type="submit" name="submit" id="form-submit" class="btn btn-success pull-right">保存</button>
      </div>

      <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>

      {% if audios %}
      <div class="well well-sm">录音记录</div>
      <div class="form-group col-xs-12">
          <div class="row">
              {% for audio in audios %}
                  <audio src="http://audio.wanpinghui.com/{{ audio.audio|safe }}" controls="controls">
                      您的浏览器无法播放该音频。
                  </audio>
                      录音日期：
                      {% if audio.record_datetime %}
                          {{ audio.record_datetime }}
                      {% else %}
                          {{ audio.record_date }}
                      {% endif %}
                  <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
              {% endfor %}
          </div>
      </div>

      <div class="clearfix visible-xs-block visible-sm-block visible-md-block visible-lg-block"></div>
      {% endif %}

      {% if demands %}
      <div class="well well-sm">发布过的项目</div>
      <table class="table table-bordered table-hover table-condensed table-striped">
        <thead>
          <tr>
            <th>项目ID</th>
            <th>项目状态</th>
            <th>发布时间</th>
          </tr>
        </thead>
        <tbody>
          {% for demand in demands %}
          <tr>
              <td><a href="{{url_for('op_bp.demand_info', demand_id=demand.id)}}" target="_blank">{{ demand.id }}</a></td>
            <td>{{ demand.status_display }}</td>
            <td>{{ demand.created_datetime }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}

      {% if partics %}
      <div class="well well-sm">抢单信息</div>
      <table class="table table-bordered table-hover table-condensed table-striped">
        <thead>
          <tr>
            <th>项目ID</th>
            <th>抢单状态</th>
            <th>抢单时间</th>
          </tr>
        </thead>
        <tbody>
          {% for partic in partics %}
          <tr>
            <td><a href="{{url_for('op_bp.demand_info', demand_id=partic.demand_id)}}" target="_blank">{{ partic.demand_id }}</a></td>
            <td>{{ partic.status_display }}</td>
            <td>{{ partic.created_datetime }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}

      {% if bills %}
      <div class="well well-sm">交易记录</div>
      <table class="table table-bordered table-hover table-condensed table-striped">
        <thead>
          <tr>
            <th>子类型</th>
            <th>金额</th>
            <th>状态</th>
            <th>交易时间</th>
          </tr>
        </thead>
        <tbody>
          {% for bill in bills %}
          <tr>
            <td>{{ bill.subtype_display }}</td>
            <td>{{ bill.amt }}</td>
            <td>{{ bill.status_display }}</td>
            <td>{{ bill.created_datetime }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}
    </form>
    <div class="modal fade" id="give_voucher_modal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x</span></button>
                    <h4 class="modal-title" id="myModalLabel">赠送代金券</h4>
                </div>
                <div class="modal-body">
                    <form action="" class="form" id="give_voucher_form">
                        {{ my_wtf_macros.form_field(voucher_form.reason, div_col=12, label_col=4, field_col=8) }}
                        {{ my_wtf_macros.form_field(voucher_form.give_day_val, div_col=12, label_col=4, field_col=8) }}
                        {{ my_wtf_macros.form_field(voucher_form.count, div_col=12, label_col=4, field_col=8) }}
                        <div class="form-group">
                          <div class="col-xs-offset-4">
                              <input type="submit" class="btn btn-danger" value="提交">
                          </div>
                      </div>
                    </form>
                </div>
            </div>
        </div>

    </div>

{% endblock %}

{% block scripts %}
{{ super() }}
<script src="https://cdn.bootcss.com/tinymce/4.7.2/tinymce.min.js"></script>
<script src="//cdn.bootcss.com/zTree.v3/3.5.24/js/jquery.ztree.core.js"></script>
<script src="//cdn.bootcss.com/zTree.v3/3.5.24/js/jquery.ztree.excheck.js"></script>
<script type="text/javascript">
    $(document).ready( function () {
        // 套餐关注地区的联动
        $('#edit-user-form').find('#pack_prov').find('input').prop("checked", false);
        var ztree_setting = {
            check: {
                enable: true,
                chkboxType : {"Y": "s", "N": "s"}
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        $.fn.zTree.init($("#pack_prov_ztree"), ztree_setting, JSON.parse('{{pack_prov_ztree_data | safe}}'));

        function getPackProvIds() {
            var treeObj = $.fn.zTree.getZTreeObj("pack_prov_ztree");
            var nodes = treeObj.getCheckedNodes(true);
            var pack_prov_ids = [];
            for (index in nodes) {
                pack_prov_ids.push(nodes[index].id);
            }
            var pack_prov_checkboxs = $('#edit-user-form').find('#pack_prov').find('input');
            for (index in pack_prov_checkboxs) {
                if (pack_prov_ids.indexOf(pack_prov_checkboxs[index].value) > -1 ) {
                    pack_prov_checkboxs.eq(index).prop("checked", true);
                }
            }
        }

        $('#form-submit').click(function() {
            getPackProvIds();
            $("#edit-user-form").submit();
        });

        // 套餐关注城市全选/全不选功能
        $("#CheckedAllProv").click(function(){
            var treeObj = $.fn.zTree.getZTreeObj("pack_prov_ztree");
            treeObj.checkAllNodes(this.checked);
        });

        tinyMCE.init({
            forced_root_block: false,
            mode : "exact",
            elements : "com_summary"
        });

        // 新增项目默认是安装. 所以先把故障分类隐藏
        $('#malf').hide();
        $('#malf').next('.select2').hide();
        $('label[for=malf]').hide();
        var has_pack_val = $('#has_pack').is(':checked');
        if (has_pack_val === true) {
            $('#pack_info').show();
        } else {
            $('#pack_info').hide();
        }

        // 套餐联动
        $('#has_pack').change(function () {
            var val = $(this).is(':checked');
            if (val === true) {
                $('#pack_info').show();
            } else {
                $('#pack_info').hide();
            }
        });

        $('#give_voucher_btn').click(function () {
            $('#give_voucher_modal').modal()
        });

        $('#give_voucher_form').submit(function () {
            var count = $('#count').val();
            var give_day_val = $('#give_day_val').val();
            var give_voucher_reason = $('#reason').val();

            if(count <=0){
                alert('赠送代金券数值非法，请检查');
                return false
            }
            if(give_day_val <= 0){
                alert('有效天数非法，请检查');
                return false
            }

            $.ajax({
                type: 'GET',
                url: '{{ url_for('op_bp.user_add_voucher') }}',
                dataType: 'json',
                data: {
                    'user_id': '{{ user.id }}',
                    'count': count,
                    'expiry_date': give_day_val,
                    'operator_id': {{ current_user.id }},
                    'give_voucher_reason': give_voucher_reason
                },
                success: function () {
                    alert('赠送成功');
                    location.reload();
                },
                error: function () {
                    console.log();
                    alert('Unexpected error')
                }
            });
            return false

        });

        // 发布项目联动
        var publish_demand_val = $('#publish_demand').is(':checked');
        if (publish_demand_val === true) {
            $('#demand_info').show();
        } else {
            $('#demand_info').hide();
        }
        $('#publish_demand').change(function () {
            var val = $(this).is(':checked');
            if (val === true) {
                $('#demand_info').show();
            } else {
                $('#demand_info').hide();
            }
        });

        // 设置回访联动
        var next_outbound_val = $('#next_outbound').is(':checked');
        if (next_outbound_val === true) {
            $('#next_outbound_info').show();
        } else {
            $('#next_outbound_info').hide();
        }
        $('#next_outbound').change(function () {
            var val = $(this).is(':checked');
            if (val === true) {
                $('#next_outbound_info').show();
            } else {
                $('#next_outbound_info').hide();
            }
        });


        // 省份与城市联动
        function get_city_choices() {
            var prov_name = $("#prov").val();
            if(prov_name != -1) {
                $.ajax({
                    url: "{{ url_for('op_bp.ajax_get_cities') }}" + "?prov_name=" + prov_name,
                    cache: true
                }).done(function (data) {
                    var city_val = $("#city").val();
                    // console.log(city_val);
                    $("#city").empty();
                    for (var i = 0; i < data["choices"].length; i++) {
                        var id = data["choices"][i]["id"];
                        var name = data["choices"][i]["name"];
                        $("#city").append(
                            "<option value='" + id + "'>" + name + "</option>"
                        );
                    }
                    $("#city").val(city_val);
                }).fail(function () {
                    alert("获取城市列表失败，请联系系统管理员!")
                });
            }
        }
        // 初始化城市选项
        get_city_choices();
        // 绑定省份change事件
        $("#prov").change(function () {
            get_city_choices();
        });

        $('#cate').change(function () {
            var val = $(this).val();
            if (val == '2') {
                $('#malf').show();
                $('#malf').next('.select2').show();
                $('label[for=malf]').show();
            } else {
                $('#malf').hide();
                $('#malf').next('.select2').hide();
                $('label[for=malf]').hide();
            }

        });

        $('#user-tag-info .single-choice .label').each(function (i, obj) {
            obj.onclick = function () {
                var current_state = ($(obj).hasClass('label-success'));
                $(obj).closest('.tags-block').find('.label').each(function (i, tag) {
                    $(tag).removeClass('label-success');
                    $(tag).addClass('label-default');
                });
                var input = $('input[name=' + $(obj).data('name') + ']');
                if(!current_state) {
                    $(obj).addClass('label-success');
                    input.val($(obj).data('value'))
                }
                else{
                    input.val(0);
                }
            };
        });

        $('#user-tag-info .multiple-choice .label').each(function (i, obj) {
            obj.onclick = function () {
                var input = $('input[name=' + $(obj).data('name') + ']');
                if($(obj).hasClass('label-success')){
                    $(obj).removeClass('label-success');
                    $(obj).addClass('label-default');
                    input.val(0);
                }
                else{
                    $(obj).addClass('label-success');
                    $(obj).removeClass('label-default');
                    input.val(1);
                }
            };
        });

        $('#display-btn').click(function () {
            var tag_body = $('#tag-info-body');
            if(tag_body.hasClass('hidden')){
                tag_body.removeClass('hidden');
                $(this).removeClass('glyphicon-triangle-bottom');
                $(this).addClass('glyphicon-triangle-top');
            }
            else {
                tag_body.addClass('hidden');
                $(this).removeClass('glyphicon-triangle-top');
                $(this).addClass('glyphicon-triangle-bottom');
            }
        });
    })
</script>

{% endblock %}
